<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto" align="center">

    <div class="fastweb_div_middle" style="width:100%;height:auto;">
        <div class="div_main_frame" style="width:100%;float:left;margin:auto;">
          <div class="div_link_rank_title" style="line-height:30px;font-size:24px;">{{entity_name}}</div>
          <div class="div_link_rank_title">{{entity_desc}}</div>
          <div class="div_link_rank_content" style="width:100%;">
              <div v-for="(entity) in entity_set" :key="entity" style="width:100%;float:left;border-bottom:1px solid gray;">
                {{entity}}
              </div>
              <div style="clear:both"></div>
          </div>
        </div> 
        <div style="clear:both"></div>
    </div>

    </div>

    
    
    <ViewFooter/>
</template>

<script>

import ViewFooter from '@/components/ViewFooter.vue'
import { getCurrentInstance } from 'vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

export default 
{
    name: 'PageEntityDetail',
    components: {
        ViewFooter,
    },
    data () {
      return {
        entity_name: '',
        entity_desc: '',
        entity_set: [],
      };
    },
    setup(){
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      return {host};
        
    },
    beforeRouteEnter(to, from, next){
      console.log("beforeRouteEnter");
      //this.getDatas("123");
      next(vm => {
        console.log("beforeRouteEnter000");
        vm.title = to.meta.title;
        let url = vm.setRequestUrl(to.fullPath);
        vm.getDatas(url, vm.pageNum, vm.pageSize);
      });
    },
    beforeRouteUpdate(to){
      console.log("beforeRouteUpdate123");
      let url = this.setRequestUrl(to.fullPath);
      //this.getDatas(url, this.pageNum, this.pageSize);
      //return true;
    },
    methods: {
      getDatas(url){
        var name = this.$route.query.name
        var user = ""; //this.$route.query.user
        if (!((typeof(this.$route.query.user) == "undefined") || (this.$route.query.user == null))) {
            user = this.$route.query.user;
        }
        console.log("getDatas:" + url);
        
        var api_url = this.host.concat("/api/display_entity_detail?name=").concat(name).concat("&user=").concat(user);
          this.axios.get(api_url)
          .then(response => {
            if((response.status == 200) && (response.data.result == 0)){
              var entity_json = JSON.parse(response.data.data);
              this.entity_name = entity_json["entity_name"];
              this.entity_desc = entity_json["entity_desc"];
              this.entity_set = entity_json["entity_set"].split("|");
              /*
              var datas = json_v1[0].data;
              if (datas.length == 0) {
                this.json_data = JSON.parse("[]");
              } else {
                this.attr = JSON.parse(datas).attr_name;
                this.json_data = JSON.parse(datas).nodes;
              }*/
            }
          })
          .catch(error => alert(error));
        
      },
      //动态设置服务端数据接口的请求URL
      //设置后回导致重复调用上次的请求
      
      setRequestUrl(path){
        let url = path;
        console.log("path:", path);
        return url;
      },
    },
    watch: {
      // 如果路由发生变化，再次执行该方法
      // "$route": "getDatas"
    }
}
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style scoped>

.div_entity_data {
    display:table;
}

.div_entity_main {
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}



.left_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  left:43%;
  top:0;
  bottom:0;
}

.right_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  top:0;
  right:43%;
  bottom:0;
}

.bracket_container {
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
}

.left_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:left;
}

.right_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:right;
}

.bracket_line {
  width:12px;
  border-top:1px solid black;
  height:0px;
  text-align:center;
  margin: auto;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right: 0;
}
.bracket_left_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-left:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:right;
}
.bracket_right_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-right:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:left;
}

</style>
